import React, { useEffect, useState } from 'react'
import Header from '../../components/Header/Header'
import { reqBanner } from '../../request/api'
import { imgPre } from '../../request/http'
import { Swiper } from 'antd-mobile'
import { Link } from 'react-router-dom'
import './Mine.less'
import me from '../../assets/img/me.jpg'
import redpacket from '../../assets/img/red_envelopes.png'
import user_oreder from '../../assets/img/user_order.png'

const Mine = () => {
  // 1.初始化状态
  const [banner, setBanner] = useState([]);
  // 2.一进页面发请求
  useEffect(() => {
    reqBanner().then(res => {
      setBanner(res.data.list);
    })
  }, [])
  return (
    <div className='mine'>
      <Header title="我的" back register></Header>
      <div className='user'>
        <div className='msg'>
          <div>
            <img src={me} alt="" />
          </div>
          <div>
            <h4>代用名</h4>
            <span>完善资料让小U更懂你</span>
          </div>
          <div>
            <div className='right'>
              <img src={redpacket} alt="" />
              <span className='signin'>每日签到</span>
            </div>
          </div>
        </div>
        <div className='nav'>
          <Link to=''>
            <span>12</span>
            <p>我的收藏</p>
          </Link>
          <Link to=''>
            <span>12</span>
            <p>浏览记录</p>
          </Link>
          <Link to=''>
            <span>0</span>
            <p>我的红包</p>
          </Link>
          <Link to='/coupon'>
            <span>12</span>
            <p>优惠券</p>
          </Link>
        </div>
        <div className='order'>
          <div className='order_title'>
            <h3>我的订单</h3>
            <Link to=''>全部订单</Link>
          </div>
          <div className='order_nav'>
            <Link to=''>
              <span><img src={user_oreder} alt="" /></span>
              <p>待付款</p>
            </Link>
            <Link to=''>
              <span><img src={user_oreder} alt="" /></span>
              <p>待收货</p>
            </Link>
            <Link to=''>
              <span><img src={user_oreder} alt="" /></span>
              <p>评价</p>
            </Link>
            <Link to='/coupon'>
              <span><img src={user_oreder} alt="" /></span>
              <p>售后/退款</p>
            </Link>
          </div>
        </div>
      </div>
      <div className='banner'>
        <Swiper autoplay style={{ "--height": "4rem" }}>

          {banner.map(item => {
            return <Swiper.Item key={item.id}>
              <img src={imgPre + item.img} alt="" style={{ 'width': '100%', 'height': '100%' }} />
            </Swiper.Item>
          })}
        </Swiper>
      </div>
    </div>
  )
}

export default Mine;